<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 购物车</title>
    <link rel="stylesheet" href="../css/homeshop.css">
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .foot_botton {
            position: fixed;
            left: 0;
            bottom: 1.53rem;
            width: 100%;
            height: 1.6rem;
            padding: 0 3.9rem 0 0;
            box-sizing: border-box;
            background: #fff;
        }

        .foot_botton .check {
            position: absolute;
            top: 0;
            left: 0;
            width: 2.1rem;
            height: .54rem;
            padding: .53rem 0 .53rem .36rem;
            font-size: .38rem;
        }

        .foot_botton .check .no {
            background-image: url(//img07.yiguoimg.com/d/web/180119/01644/142027/check3.png);
            display: inline-block;
            width: .6rem;
            height: .6rem;
            margin: 0 .18rem 0 0;
            background: url(//img06.yiguoimg.com/d/web/180119/01641/141347/check1.png) no-repeat;
            background-size: 100%;
            vertical-align: -4px;
        }

        .foot_botton .text {
            padding: .2rem 0;
            line-height: .6rem;
            font-size: 11px;
            text-align: right;
        }

        .foot_botton .red {
            color: #fb3d3d;
            font-size: .46rem;
        }

        .foot_botton .text span {
            color: #999;
        }

        .foot_botton .btn {
            position: absolute;
            right: 0;
            top: 0;
            width: 3.6rem;
            height: 1.6rem;
        }

        .foot_botton .btn .no {
            background: #fb3d3d;
            display: block;
            width: 3.6rem;
            height: 1.6rem;
            line-height: 1.6rem;
            font-size: .5rem;
            color: #fff;
            text-align: center;
        }

        .foot_navbar {
            z-index: 99;
            position: fixed;
            bottom: 0;
            left: 0;
            height: 1.53rem;
            width: 100%;
            background: #fff;
        }

        .foot_navbar_n {
            width: 100%;
            height: 100%;
        }

        .foot_navbar_n a {
            width: 25%;
            float: left;
            display: inline-block;
            font-size: .36rem;
            position: relative;
            text-align: center;
            color: #8d8a8a;

            padding-top: 1rem;
            box-sizing: border-box;
        }

        .foot_navbar_n .icon1 {
            background: url(//img05.yiguoimg.com/e/web/170110/00583/164146/nav_home_selected.png) 50% no-repeat;
            background-size: 100% 100%;
        }

        .foot_navbar_n .icon2 {
            background: url(//img07.yiguoimg.com/d/web/180508/01315/170504/nav_classify.png) 50% no-repeat;
            background-size: 100% 100%;
        }

        .foot_navbar_n .icon3 {
            background: url(//img07.yiguoimg.com/e/web/170110/00583/164146/nav_list_active.png) 50% no-repeat;
            background-size: 100% 100%;
        }

        .foot_navbar_n .icon4 {
            background: url(//img07.yiguoimg.com/e/web/170110/00583/164146/nav_user.png) 50% no-repeat;
            background-size: 100% 100%;
        }

        .foot_navbar_n .icon {
            padding: 0;
            display: inline-block;
            position: absolute;
            top: .18rem;
            left: 50%;
            margin-left: -.51rem;
            width: 1.02rem;
            height: .72rem;
        }

        .action {
            color: #008842 !important;
        }
    </style>
</head>

<body>
    <div class="shopCat">
        <div class="logo">
            登录可同步购物车内商品
            <a href="/html/denglu.html" class="line_all">登录</a>
        </div>
        <div class="logo_content"></div>
        <div class="content">

        </div>
        <div class="footer">
            <div class="title">
                <h2>猜你喜欢</h2>
            </div>
        </div>
        <div class="foot_botton a">
            <div class="check">
                <i class="no"></i>
                全选
            </div>
            <div class="text">
                <p>合计(不含运费)：
                    <b class="red">￥0.00</b>
                </p>
                <span>已优惠:￥0.00</span>
            </div>
            <div class="btn">
                <a href="javascript:;" class="no">去结算(<span>0</span>)</a>
            </div>
        </div>
        <div class="foot_navbar">
            <div class="foot_navbar_n">
                <a href="/html/home.html" class="list home">
                    <i class="icon icon1"></i>首页
                </a>
                <a href="/html/lmy-fenlei.html" class="list classlist">
                    <i class="icon icon2"></i>分类
                </a>
                <a href="javascript:;" class="list action ">
                    <i class="icon icon3"></i>购物车
                </a>
                <a href="/html/my.html" class="list myself">
                    <i class="icon icon4"></i>我的易果
                </a>
            </div>
        </div>
    </div>
</body>
<script src="../js/Storage.js"></script>

<script src="../js/rem.js"></script>
<script src="../js/zepto.min.js"></script>
<script src="../js/getdata.js"></script>
<script src="../js/homeshop.js"></script>
<script src="../js/ejs.min.js"></script>
<script type="txt/html" id="iddddd">
    <div class="line-bottom">
        <div class="img">
            <img src="<%= data.img %>" alt="">
        </div>
        <div class="text">
            <h2 class="elli2"><%= data.title %></h2>
            <p>
                <strong>
                    $<b>
                        <%= data.piced %> 
                    </b>
                </strong>
            </p>
        </div>
        <div class="del">
            <i></i>
        </div>
        <div class="num">
            <span class="line-all cut"><i></i></span>
            <span class="line-botto"><%=data.num%></span>
            <span class="line-all add"><i></i></span>
        </div>
    </div>
</script>
<script>
    const shop = localStorage.proxy('shop')


    function addBind() {
        $(".num .line-all.cut").click(function () {
            let title = $(this).parents(".line-bottom").find('.text .elli2').text()
            localStorage.query("shop", "title=" + title, function (index) {
                if (--(shop[index].num) === 0) {
                    shop.splice(index, 1)
                }
            })
        })

        $(".num .line-all.add").click(function () {
            let title = $(this).parents(".line-bottom").find('.text .elli2').text()
            localStorage.query("shop", "title=" + title, function (index) {
                if (++(shop[index].num) === 0) {
                    shop.splice(index, 1)
                }
            })
        })

        $(".line-bottom .del").click(function () {
            let title = $(this).parents(".line-bottom").find('.text .elli2').text()
            localStorage.query("shop", "title=" + title, function (index) {
                shop.splice(index, 1)
            })
        })
    }

</script>
<script>
    function updated() {
        let html = ""
        let num = 0
        let piced = 0
        for (var i = 0; i < shop.length; i++) {
            html += ejs.render($("#iddddd").html(), { data: shop[i] })
        }
        if (html === "") {
            $(".content").html(`           <div class="shop_in_none">
                <div class="line_top"></div>
                <p class="icon">购物车空空的，快去逛逛吧！</p>
                <div class="btn">
                    <a href="/html/home.html">去逛逛</a>
                </div>
            </div>`)
        } else {
            $(".content").html(html)
        }
        addBind()

        for (var i = 0; i < shop.length; i++) {
            num += (+shop[i].num)
            piced += shop[i].piced * shop[i].num
        }

        $(".foot_botton .no span").html(num)
        $(".foot_botton.a .text .red").html("￥" + piced.toFixed(2))
    }

    updated()

    localStorage.after = updated


    function add() {
        $('.btn').click(function () {
            let data = {
                title: $(this).parent().find('.elli2').text(),
                piced: $(this).parent().find('.red b').text(),
                img: $(this).parent().find('.img img').attr('src'),
                num: 1
            }
            for (var i = 0; i < shop.length; i++) {
                if (shop[i].title === data.title) {
                    shop[i].num++
                    return
                }
            }
            shop.push(data)
        })
    }


    // console.log(shop)
</script>


</html>